<template>
  <div>
    <div class="ele-table-tool ele-table-tool-default">
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="add">添加</el-button>
    </div>
    <el-table
      border
      stripe
      :data="fields"
      :height="height"
    >
      <el-table-column
        label="编号"
        width="80"
        align="center"
        type="index"
      />
      <el-table-column
        label="地块名称"
        prop="name"
        align="center"
        width="200"
      />
      <el-table-column
        label="土壤信息"
        prop="soil.name"
        align="center"
      />
      <el-table-column
        label="种植作物"
        prop="address"
        align="center"
      >
        <template #default="scope">
          {{ getAttr(scope.row.plants,'id',crops) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="500"
      >
        <template slot-scope="scope">
          <el-link type="primary" icon="el-icon-edit" @click="edit(scope.row)">修改</el-link>
          <el-link type="warning" class="ml12" icon="el-icon-menu" @click="soil(scope.row)">设置土壤信息</el-link>
          <el-link type="success" class="ml12" icon="el-icon-ship" @click="plant(scope.row)">设置种植信息</el-link>
          <el-link type="default" class="ml12" icon="el-icon-link" @click="device(scope.row)">关联设备</el-link>
          <el-link type="danger" class="ml12" icon="el-icon-delete" @click="del(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import { getAttr, uniqueArr } from '@/utils'
export default {
  props: {
    fields: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      fit: 'fill',
      height: 'calc(100vh - 168px)',
      project: this.$store.getters.project
    }
  },
  computed: {
    ...mapGetters(['crops'])
  },
  methods: {
    add() {
      this.$emit('add')
    },
    edit(row) {
      this.$emit('edit', row)
    },
    plant(row) {
      this.$emit('plant', row)
    },
    del(row) {
      this.$emit('del', row)
    },
    soil(row) {
      this.$emit('soil', row)
    },
    device(row) {
      this.$emit('device', row)
    },
    getAttr(value, name, datas) {
      let res = []
      value.forEach((val) => {
        res.push(getAttr(val.crop_id, name, datas))
      })
      res = uniqueArr(res)
      return res.join(',')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

